<template>
  <div v-if="imgs.length > 0" class="banner">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item, index) in imgs" :key="index"><img :src="item"/></mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
  import api from "@/assets/js/api";
  export default {
    data: function() {
      return {
        imgs: []
      };
    },
    created: function() {
      api.fetch("/api/banners").then(res => {
        this.imgs = res.data;
        setTimeout(() => {
          let imgArr = Array.from(document.querySelectorAll('.mint-swipe img'));
          imgArr.forEach((item) => {
            item.setAttribute("onclick", "return false;")
          });
        }, 500)
      }).catch();
    },
    methods: {}
  };
</script>
<style lang="less" scoped>
  .banner {
    width: 100%;
    height: 3rem;
  }
  .banner img {
    width: 100%;
    height: 100%;
    background-color: #fff;
    /*border-radius: 0.2rem;*/
    overflow: hidden;
  }
</style>
